<template>
  <editor-layout class="edit" @ok="handleOk" v-on="$listeners" v-loading="loading" :loading="saveLoading">
    <el-form size="small" :model="model" :rules="rule" ref="form" @keyup.enter.native="handleOk()" label-width="110px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="产品编码" prop="code">
            <el-input v-model="model.code" placeholder="商家内部唯一编码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品名称" prop="name">
            <el-input v-model="model.name" placeholder="产品名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产年份" prop="productYear">
            <sys-select v-model="model.productYear" :data="yearList"></sys-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="烧制方式" prop="makeWay">
            <sys-select v-model="model.makeWay" type="makeWay"></sys-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="图片" prop="attachPath">
        <file-upload ref="up1" :params="{xtlx: 'product-image'}" :limit="1" accept="image/*" listType="picture"/>
        <file-view-single v-if="id && model.attachPath" :src="model.attachPath" is-nginx/>
      </el-form-item>
    </el-form>
  </editor-layout>
</template>

<script>

/**
 * Created by Administrator on 2023/5/25
 */
import fileUpload from '@/components/common/file/file-upload'
import fileViewSingle from '@/components/common/file/file-view-single'

import {postProductSave, getProductInfoId} from '$my/code/api/nfy-product'

export default {
  name: 'edit',
  components: {
    fileUpload,
    fileViewSingle
  },
  props: {
    id: [String, Number]
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      model: {
        id: '',
        code: '',
        name: '',
        makeWay: '',
        productYear: '',
        attachPath: ''
      },
      rule: {
        code: [{required: true, message: '必填项'}],
        name: [{required: true, message: '必填项'}],
        makeWay: [{required: true, message: '必填项'}],
        productYear: [{required: true, message: '必填项'}]
      },
      yearList: []
    }
  },
  methods: {
    async init() {
      this.buildYear()
      if (this.id) {
        this.loadForm()
      }
    },
    buildYear() {
      const list = []
      let year = new Date().getFullYear();

      let len = 10
      while (len > 0) {
        list.push({label: year, value: year})
        year--
        len--
      }

      this.yearList = list
    },
    async loadForm() {
      this.loading = true
      const data = await getProductInfoId(this.id).catch(e => {
        this.loading = false
        throw new Error(e)
      })
      this.model = data
      this.loading = false
    },
    handleOk() {
      this.$refs.form.validate(ok => {
        if(!ok) return

        const images = this.$refs.up1.getData()
        const ids = []
        if(images.length > 0) {
          const {fileId, filePath} = images[0]
          ids.push(fileId)
          this.model.attachPath = filePath
        }

        this.saveLoading = true
        postProductSave(this.model).then(res => {
          this.saveLoading = false
          this.$notify.success('保存成功！')
          this.$emit('on-ok')
        })
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.edit {
}
</style>
